/* ==========================================================================
   MOBILE FIRST MODULE SKELETON
   ========================================================================== */

// MOBILE STYLES ////////////////////////////////////////////////////////////

.quote {
    float: right;
}

.threads {
    @include span-columns(12);
    float: none;
    padding: 0 15px 15px 15px;

    .thread-summary {
        position: relative;
        width:100%;
        @include clearfix;
        padding: 12px 20px 12px 10px;
        margin: 0 0 6px 0;

        .info {
            float: none;

            .post-info {
                display: block;
                position: absolute;
                right:0px;
                top:0px;

                .accepted {
                    display: none;
                }

                .mini {
                    margin: 0 0 3px 0;
                    float: none;
                    display: block;
                }
            }
        }

        .post-info {
            display: none;
        }

        img {
            display: none;
        }

        h3 {
            margin:0;
            padding: 0 0 3px 0;
            font-size:16px;
            color:$lioGrey;
            font-family: 'Source Sans Pro', sans-serif;
            font-weight: 400;

            a {
                color:$lioGrey;

                &:hover {
                    color:$lioRed;
                }
            }
        }

        ul {
            margin:0;
            padding: 0;
        }

        ul li {
            display: inline;
            float: left;
            color:#959595;
            padding: 0 5px 0 0;
            font-family: 'Source Sans Pro', sans-serif;
            font-weight: 400;
            font-style: italic;
        }

        .comment-count {
            display: block;
            min-width:25px;
            background: #cdcdcd;
            padding: 5px;
            text-align: center;
            color:white;

            &.new, &:hover {
                background: $lioRed;
            }
        }
    }

    .thread-summary {
        background: white;
    }
}

.forum {

    @include span-columns(12);
    float: none;

    .thread {
        padding: 15px;
        margin: 15px;
        background: white;

        h1 {
            padding: 3px 0 15px 0;
            margin: 0 0 15px 0;
            font-family: 'Source Sans Pro', sans-serif;
            font-weight: 600;
            border-bottom:1px solid #cdcdcd;
            font-size:1.4em;
        }

        p {
            margin: 0;
            line-height: 1.5;
        }

        ul, li {
            margin: 0;
            padding: 0;
        }

        li {
            margin: 0 0 0 15px;
            line-height: 1.5;
        }

        img {
            max-width: 100%;
        }
    }
}


// BREAKPOINT 1 (480) ////////////////////////////////////////////////////////////

@media only screen and (min-width: 480px) {

.threads {
            @include span-columns(12);
            @include clearfix;
            padding: 0 15px 15px 15px;
            float: none;

            .post-info {
                display: none;
            }


            .thread-summary {
                .info {
                    float: none;

                    .post-info {
                        display: block;
                    }
                }

                .comment-count {
                    position: relative;
                    min-width:25px;
                    float: right;
                    background: #cdcdcd;
                    padding: 5px;
                    margin: 7px 0 0 0;
                    text-align: center;
                    color:white;
                }
            }
        }

}


// BREAKPOINT 2 (768) ////////////////////////////////////////////////////////////

@media only screen and (min-width: 768px) {

        .threads {
            .thread-summary {

                img {
                    float: left;
                    height: auto;
                    width:7%;
                    display: block;
                    padding: 0 10px 0 0;
                }


                .post-info {
                    width:23%;
                    float: right;
                    display: block;
                }

                .info {
                    float: left;
                    width:65%;
                    .post-info {
                        display: none;
                    }
                }
            }
        }


}


// BREAKPOINT 3 (1024) ////////////////////////////////////////////////////////////

@media only screen and (min-width: 1024px) {

    .threads {
        .thread-summary {

            .post-info {
                width:15%;
            }

            .info {
                width:73%;
            }
        }
    }

}


// BREAKPOINT 4 (1440) ////////////////////////////////////////////////////////////

@media only screen and (min-width: 1440px) {

    .module {}
}